<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>欢迎注册TopoGroup账号</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" type="text/css" href="css/register.css">
		<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
		<script type="text/javascript" src="js/swfobject.js"></script>
		<script type="text/javascript" src="js/jquery.uploadify.v2.1.4.min.js"></script>
		<script type="text/javascript">

		$(document).ready(function() {
            $("#uploadify").uploadify({
                'uploader'       : 'uploadify.swf',
                'script'         : '${pageContext.request.contextPath}/servlet/Upload',
                'cancelImg'      : 'res/images/cancel.png',
                'folder'         : 'uploads',
                'queueID'        : 'fileQueue',
                'auto'           : false,
                'multi'          : true,
                'simUploadLimit' : 1,
                'buttonText'     : 'BROWSE',
                 'fileExt'     : '*.jpg;*.gif;*.png',
                 'fileDesc'    : 'Image Files',
                'onComplete'  : function(event, ID, fileObj, response, data) {
                $("#url").val(response);
    }
            });


		var emailadd;
		var email_already_checked = false;
		var password_already_checked = false;
		var nickname_already_checked = false;
		var realname_already_checked = false;
		var submit_permitted = false;

		$("input[name='email']").focusout(function() {
			emailadd = $("input[name='email']").val();
			if (emailadd == "") {
				email_already_checked = false;
				$(".message:first").text("不能为空");
			} else {
				$.ajax({
					type : "POST",
					url : "register",
					data : "email=" + emailadd + "&type=check",
					success : function(msg) {
						if(msg == "可以使用\r\n")
							email_already_checked = true;
						else
							email_already_checked = false;
						$(".message:first").text(msg);
					}
				});
			}
			check_submit();
		});
		
		$("input[name='password']").focusin(function() {
		if(password_already_checked == false)
			$(".message:eq(1)").text("密码长度在6-12位之间");
			check_submit();
		});
		$("input[name='password']").focusout(function() {
			var l = $("input[name='password']").val().length;
			if(l < 6 || l > 12)
			{
				password_already_checked = false;
				$(".message:eq(1)").css({color : "#F00"});
				$(".message:eq(1)").text("密码长度在6-12位之间");
			}
				else
				{
				password_already_checked = true;
				$(".message:eq(1)").css({color : "#00F"});
				$(".message:eq(1)").text("OK");
				}
			check_submit();
		});
		
		
		$("input[name='nickname']").focusin(function() {
		if(nickname_already_checked == false)
			check_submit();
			$(".message:eq(2)").text("长度在1-12个字符之间");
		});
		$("input[name='nickname']").focusout(function() {
			var l = $("input[name='nickname']").val().length;
			if(l < 1 || l > 12)
			{
				nickname_already_checked = false;
				$(".message:eq(2)").css({color : "#F00"});
			$(".message:eq(2)").text("长度在1-12个字符之间");
			}
			else
			{
				nickname_already_checked = true;
				$(".message:eq(2)").css({color : "#00F"});
				$(".message:eq(2)").text("OK");
			}
			check_submit();
		});
		
		
		$("input[name='realname']").focusout(function() {
			var l = $("input[name='realname']").val().length;
			if(l < 1)
			{
				realname_already_checked = false;
				$(".message:eq(3)").css({color : "#F00"});
				$(".message:eq(3)").text("不能为空!");
			}
			else if(l > 18)
			{
				realname_already_checked = false;
				$(".message:eq(3)").css({color : "#F00"});
				$(".message:eq(3)").text("太长了！");
			}
			else
			{
				realname_already_checked = true;
				$(".message:eq(3)").css({color : "#00F"});
				$(".message:eq(3)").text("OK");
			}
			
			check_submit();
		});
		
		function check_submit()
		{
			if( email_already_checked == true &&  password_already_checked == true  &&
				realname_already_checked == true  && nickname_already_checked == true)
			{
				$("input[name='submit']").css({color : "#000"});
				submit_permitted = true;
			}
			else
			{
				if(submit_permitted == false)
					return;
				else
				{
					$("input[name='submit']").css({color : "#A38B8C"});
					submit_permitted = false;
				}
			}
		}
		
		$("input[name='submit']").click(function()
		{
			$("input[name='submit']").submit();
		}
		);
	});
	</script>

	</head>

	<body>
		<div id="page">
			<div id="header"></div>
			<div id="register_form">
				<form action="register" method="post">
					<table class="reg-table">
						<tbody>
							<tr class="inputbox">
								<th class="label">
									邮箱:(
									<font color="#F00">*</font><font color="#000">)</font>
								</th>
								<td>
									<input id="email" class="text r5px" type="email"
										placeholder="yourname@example.com" spellcheck="false"
										name="email">
								</td>
								<td class="message">
								</td>
							</tr>


							</tr>
							<tr class="inputbox">
								<th class="label">
									密码:(
									<font color="#F00">*</font><font color="#000">)</font>
								</th>
								<td>
									<input id="password" class="text r5px" type="password"
										name="password">
								</td>
								<td class="message">
								</td>
							</tr>

							<tr class="inputbox">
								<th class="label">
									昵称:(
									<font color="#F00">*</font><font color="#000">)</font>
								</th>
								<td>
									<input id="nickname" class="text r5px" type="text"
										name="nickname">
								</td>
								<td class="message">
								</td>
							</tr>
							<tr class="inputbox">
								<th class="label">
									真实姓名:(
									<font color="#F00">*</font><font color="#000">)</font>
								</th>
								<td>
									<input id="realname" class="text r5px" type="text"
										name="realname">
								</td>
								<td class="message">
								</td>
							</tr>
							<tr class="inputbox">
								<th class="label">
									简介:
								</th>
								<td>
									<textarea rows="3" cols="20" id="introduction"
										class="text r5px" name="introduction"> </textarea>
								</td>
								<td class="message">
								</td>
							</tr>
						</tbody>
					</table>

					<div class="upload-file" style="margin-left: 150px">
						<div id="fileQueue"></div>
						<input type="file" name="uploadify" id="uploadify" />
						<p>
							<a href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a>&nbsp;
							<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>
						</p>
					</div>
					<input val="" type="text" style="display : none" id="url" name="url">
					<div class="inputbox">
						<input id="submit" type="submit" name="submit" value="提交">
					</div>
				</form>

			</div>
		</div>
	</body>
</html>
